<!--
代码模板说明：
1.codeGenaratorExample 为例子用的实体名称，可批量替换掉
2.表单字段替换成自己业务的表单字段
3.请求地址自行替换
-->
<template>
  <div id="lap-app" v-loading="pFormLoading">
    <el-row class="lap-form-body">
      <!--基本表单信息-->
      <el-form ref="form" label-width="120px" :model="pFormData" :rules="rules">
        <el-row :gutter="10">
          <el-col :span="24">
            <el-form-item label="交互按钮名称" prop="ActionName">
              <el-input
                v-model="pFormData.ActionName"
                :disabled="!!mockSendDataGUID"
              ></el-input
            ></el-form-item>
          </el-col>
        </el-row>
        <el-col :span="24">
          <el-form-item label="调用方法">{{ mockInfo.Method }}</el-form-item>
        </el-col>
        <el-row :gutter="10">
          <el-col :span="24">
            <el-form-item label="描述" prop="Description">{{
              mockInfo.Description
            }}</el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="24">
            <el-form-item label="附加到模拟器">
              <!-- <el-input
                v-model="refMockNameList"
                :disabled="!!mockSendDataGUID"
                placeholder="Others2Mysoft1;Others2Mysoft2"
              ></el-input>
              <label style="color: #f00"
                >附加后可以在对应模拟接口数据中使用此按钮。多个模拟器名称使用英文分号分隔。</label
              > -->
              <el-select
                v-model="pFormData.RefMockNameList"
                :disabled="!!mockSendDataGUID"
                multiple
                filterable
                remote
                reserve-keyword
                placeholder="请输入关键词"
                :remote-method="onSearchMockInfo"
                style="width: 100%"
              >
                <el-option
                  v-for="item in searchedMockInfoList"
                  :key="item.Name"
                  :label="item.Name + ' - ' + item.Description"
                  :value="item.Name"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="24">
            <el-form-item label="发送数据">
              <json-view :data="sendData" :deep="1" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="24">
            <el-form-item label="接收数据">
              <json-view :data="responseData" :deep="1" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="24">
            <el-form-item label="模拟脚本" prop="Code">
              <MonacoEditor
                style="border: 1px solid #ccc"
                height="500"
                language="javascript"
                :editorOptions="editorOptions"
                @mounted="onMounted"
                @codeChange="onCodeChange"
              ></MonacoEditor>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="24">
            <el-form-item>
              <el-button
                type="primary"
                :disabled="pFormLoading"
                @click="(e) => onSubmit(e, { close: false })"
                >保存</el-button
              >
              <el-button
                v-if="!mockSendDataGUID"
                type="warning"
                @click="() => onDebug(pFormData)"
                >调试</el-button
              >
              <el-button
                v-if="!!mockSendDataGUID"
                type="warning"
                @click="() => onRealDebugMockAction()"
                >仿真调试</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-row>
  </div>
</template>

<script>
import jsonView from "vue-json-views";
import MonacoEditor from "vue-monaco-editor";
export default {
  mixins: [$lap.FormView],
  name: "lap-app",
  props: {
    mockName: {
      required: true,
    },
    mockSendDataGUID: {
      default: null,
    },
    sendData: {},
    responseData: {},
  },
  components: { MonacoEditor, jsonView },
  data() {
    return {
      title: "", //页面标题
      pPageFunctionCode: "", //页面功能编码
      pFormData: {
        RefMockNameList: [],
      },
      editor: null,
      /*表单校验规则 */
      rules: {
        ActionName: [{ required: true, message: "交互按钮名称不允许为空" }],
      },
      editorOptions: {
        selectOnLineNumbers: true,
        roundedSelection: false,
        readOnly: false,
        automaticLayout: true,
        glyphMargin: true,
        showFoldingControls: "always",
        formatOnPaste: true,
        formatOnType: true,
        folding: true,
      },
      mockInfoList: [],
      searchedMockInfoList: [],
      mockInfo: {},
    };
  },
  methods: {
    /**
     * 平台加载方法
     */
    platLoadData() {
      const that = this;
      that.loadMockInfo(that.mockName);

      if (that.dataId) {
        that.getMockInfoList();
        //编辑/查看模式下查询数据
        return $lap
          .post("/MYWS/MockHandler.ashx?type=GetMockAction", {
            ActionID: that.dataId,
            MockName: that.mockName,
          })
          .then((data) => {
            that.pFormData = data;
            that.pFormData.RefMockNameList = data.RefMockNameList || [];
            if (that.editor) {
              that.editor.setValue(data.Code);
            }
          });
      }
    },
    onMounted(editor) {
      const that = this;
      that.editor = editor;
      if (that.pFormData.Code) {
        that.editor.setValue(that.pFormData.Code);
      }
    },
    onCodeChange(editor) {
      const that = this;
      that.pFormData.Code = that.editor.getValue();
    },
    /**
     * 查询匹配
     */
    onSearchMockInfo(keywords) {
      const that = this;
      if (keywords !== "") {
        setTimeout(() => {
          that.searchedMockInfoList = that.mockInfoList.filter((item) => {
            return (
              (item.Name || "").toLowerCase().indexOf(keywords.toLowerCase()) >
                -1 ||
              (item.Description || "")
                .toLowerCase()
                .indexOf(keywords.toLowerCase()) > -1
            );
          });
        }, 200);
      } else {
        that.searchedMockInfoList = that.mockInfoList;
      }
    },
    /**
     * 查询Mock信息
     */
    getMockInfoList() {
      const that = this;
      $lap
        .post("/MYWS/MockHandler.ashx?type=ListMockInfoData", {
          Keywords: "",
        })
        .then((data) => {
          that.mockInfoList = data;
          that.searchedMockInfoList = data;
        });
    },
    /**
     * 加载MockInfo信息
     */
    loadMockInfo(mockName) {
      const that = this;
      $lap
        .post("/MYWS/MockHandler.ashx?type=GetMockInfoData", {
          MockName: mockName,
        })
        .then((data) => {
          that.mockInfo = data || {};
        });
    },
    /**
     * 提交数据
     */
    onSubmit(e, opts = {}) {
      const that = this;
      that.platFormValid("form", () => {
        debugger;
        that.pFormData.RefMockNameList = that.pFormData.RefMockNameList || [];
        return $lap
          .submit("/MYWS/MockHandler.ashx?type=SaveMockAction", that.pFormData)
          .then((data) => {
            that.$emit("after-submit", data, opts);
            that.platSetFormDefault();
          });
      });
    },
    /**
     * 模拟第三方请求
     */
    onThirdRequest(row) {
      const that = this;
      $lap
        .post("/MYWS/MockHandler.ashx?type=ThirdRequestMock", {
          Name: row.Name,
        })
        .then((data) => {
          that.$message.success("请求成功，请在调用记录中查看！");
        });
    },
    /**
     * 调试当前脚本
     */
    onDebug(row) {
      const that = this;
      $lap
        .post("/MYWS/MockHandler.ashx?type=DebugMockAction", {
          MockName: that.mockName,
          ActionID: row.ActionID,
        })
        .then((data) => {
          that.$alert(data, {
            title: "调试结果",
            dangerouslyUseHTMLString: true,
          });
        });
    },
    /**
     * 使用当前记录发送的数据仿真调试脚本执行返回值
     */
    onRealDebugMockAction() {
      const that = this;
      $lap
        .post("/MYWS/MockHandler.ashx?type=RealDebugMockAction", {
          ActionData: that.pFormData,
          MockSendDataGUID: that.mockSendDataGUID,
        })
        .then((data) => {
          that.$alert(data, {
            title: "调试结果",
            dangerouslyUseHTMLString: true,
          });
        });
    },
  },
};
</script>